<template>
  <common-search :show-item="2" :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="search" @reset="reset"></common-search>
  <a-button type="primary" @click="exportData" :loading="uploadLoading">
    <template #icon>
      <ExportOutlined />
    </template>
    导出
  </a-button>
  <common-table
      :columns="columns"
      :dataSource="dataList"
      v-model:localPagination="page"
      @paginationChange="onPageChange"
      v-model:loading="loading"
      :rowKey="(record) => record.id"
      :scroll="{ x: 'max-content'}"
  ></common-table>
</template>
<script>
export default {
  name:'firstShipping-containerTrack'
}
</script>
<script setup>
import { ref } from "vue";
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import {getContainerNumber} from "@/api/firstShipping/containerTrack.js";
import {message} from "ant-design-vue";
import {postFile} from "@utils/service/index.js";
const uploadLoading = ref(false);
const columns = [
  {
    "dataIndex": "inContainerDate",
    "title": "装柜日期",
    "align": "center",
    "fieldType": "Date"
  },
  {

    "dataIndex": "shipOwner",
    "title": "船东",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "shipmentPort",
    "title": "起始港",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "targetPort",
    "title": "目的港",
    "align": "center",
    "fieldType": "String"
  },
  {
    "dataIndex": "so",
    "title": "提单号",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "containerNo",
    "title": "柜号",
    "align": "center",
    "fieldType": "String"
  },
  {
    "dataIndex": "etd",
    "title": "ETD",
    "align": "center",
    "fieldType": "Date"
  },
  {
    "dataIndex": "atd",
    "title": "ATD",
    "align": "center",
    "fieldType": "Date"
  },
  {
    "dataIndex": "eta",
    "title": "ETA",
    "align": "center",
    "fieldType": "Date"
  },
  {
    "dataIndex": "ata",
    "title": "ATA",
    "align": "center",
    "fieldType": "Date"
  },
  {
    "dataIndex": "unloadContainerTime",
    "title": "卸船时间",
    "align": "center",
    "fieldType": "Date"
  },
  {

    "dataIndex": "pickContainerTime",
    "title": "提柜时间",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "shipmentPlanCode",
    "title": "头程计划单号",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "inWarehouseCode",
    "title": "入库单号",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "warehouseCode",
    "title": "仓库",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "receivingStatus",
    "title": "收货状态",
    "align": "center",
    "fieldType": "String"
  },
  {

    "dataIndex": "arrivalWarehouseTime",
    "title": "送仓时间",
    "align": "center",
    "fieldType": "Date"
  },
  {

    "dataIndex": "uploadGoodsTime",
    "title": "卸货时间",
    "align": "center",
    "fieldType": "Date"
  },
  {

    "dataIndex": "shelvesAddedTime",
    "title": "上架时间",
    "align": "center",
    "fieldType": "Date"
  },
  {
    "dataIndex": "warehouseCountry",
    "title": "国家",
    "align": "center",
    "fieldType": "String"
  }
]
const formItems = ref([
  {
    label:'柜号',
    type:'input',
    field:'containerNo',
  },
  {
    label:'国家',
    type:'input',
    field:'country',
  },
  {
    label:'装柜日期',
    type:'rangePicker',
    field:'time1',
    showTime: false,
  },
  {
    label:'送仓日期',
    type:'rangePicker',
    field:'time2',
    showTime: false,
  },
  {
    label:'卸货日期',
    type:'rangePicker',
    field:'time3',
    showTime: false,
  },
  {
    label:'上架日期',
    type:'rangePicker',
    field:'time4',
    showTime: false,
  },
])
const { dataList, query, loading, page, search, reset, onPageChange } = useSearchTable({
  searchAPI: getContainerNumber,
  queryFactory: () => ({
  }),
  beforeSearch:()=>{
    //处理日期
    if(query.value.time1){
      query.value.inContainerDateBegin = query.value.time1[0]
      query.value.inContainerDateEnd = query.value.time1[1]
    }else{
      delete query.value.inContainerDateBegin
      delete query.value.inContainerDateEnd
    }
    if(query.value.time2){
      query.value.arrivalWarehouseTimeBegin = query.value.time2[0]
      query.value.arrivalWarehouseTimeEnd = query.value.time2[1]
    }else{
      delete query.value.arrivalWarehouseTimeBegin
      delete query.value.arrivalWarehouseTimeEnd
    }
    if(query.value.time3){
      query.value.uploadGoodsTimeBegin = query.value.time3[0]
      query.value.uploadGoodsTimeEnd = query.value.time3[1]
    }else{
      delete query.value.uploadGoodsTimeBegin
      delete query.value.uploadGoodsTimeEnd
    }
    if(query.value.time4){
      query.value.shelvesAddedTimeBegin = query.value.time4[0]
      query.value.shelvesAddedTimeEnd = query.value.time4[1]
    }else{
      delete query.value.shelvesAddedTimeBegin
      delete query.value.shelvesAddedTimeEnd
    }
  }
});
const exportData = async () => {
  try{
    uploadLoading.value = true
    const res = await postFile('/containerNumber/export','post',query.value,'柜号跟踪.xlsx')
    message.success('导出成功')
  }catch (e){
    message.error(e)
  }finally {
    uploadLoading.value = false
  }
}
</script>
<style scoped>

</style>
